<template>
  <a-modal @cancel="btnCancel" title="查看员工" v-model:visible="showDetailComputed" :footer="null">
    <!-- 显示内容 -->
    <a-descriptions title="个人详情">
      <a-descriptions-item label="用户名">{{ formData.username }}</a-descriptions-item>
      <a-descriptions-item label="手机号">{{ formData.mobile }}</a-descriptions-item>
      <a-descriptions-item label="头像">
        <a-avatar :src="formData.staffPhoto"></a-avatar>
      </a-descriptions-item>
      <a-descriptions-item label="工号">{{ formData.workNumber }}</a-descriptions-item>
      <a-descriptions-item label="聘用形式"></a-descriptions-item>
      <a-descriptions-item label="部门">
        {{ formData.defartmentName }}
      </a-descriptions-item>
      <a-descriptions-item label="入职时间">
        {{ formData.timeOfEntry }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { getEmployeeDetail } from '@/api/employee'
const formData = ref({})
const emits = defineEmits(["update:showDetail"])
const { showDetail, userId } = defineProps({
  showDetail: Boolean,
  userId: String
})
const showDetailComputed = computed({
  set(val) {
    emits("update:showDetail", val)
  },
  get() {
    return showDetail
  }
})
watch([() => showDetail, () => userId], async () => {
  if (showDetail && userId) {
    // 在弹层显示- userId有值的情况下
    formData.value = await getEmployeeDetail(userId)
  }
})
// 直接清空原来的数据
const btnCancel = () => {
  formData.value = {} // 关闭的时候 直接清空数据
}
</script>
<style>
</style>